<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel=StyleSheet HREF="master.css" TYPE="text/css" MEDIA=screen/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery-css-transform.js"></script>
<script src="js/jquery-animate-css-rotate-scale.js"></script>
<!--<script src="js/script.js"></script>-->
</head>

<style>

	#stage {
		width:600px;
		height:600px;
		margin:0 auto;
		outline:white 1px solid;
		position:relative;
		-webkit-mask-image:url(images/mask.png) ;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: 40px 40px;
		cursor:none;
	}

	#box {
		width:200px;
		height:200px;
		background-color:red;
		position:absolute;
		margin:40px 100px;
	}

	#status {
		color:#fff;
		width:300px;
		height:300px;
		margin-top:500px;
	}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#stage').mousemove(function(e){
   		//var mousePos = e.pageX + e.pageY;+
   		var x = e.pageX - this.offsetLeft;
   		var y = e.pageY - this.offsetTop;
   		//$('#stage').css('-webkit-mask-position', e.pageX + 'px ' + e.pageY + 'px');
   		$('#stage').css('-webkit-mask-position', x + 'px ' + y + 'px');
   		console.log(e.pageX + ' ' +e.pageY


      //$('#status').html(e.pageX +', '+ e.pageY);
   })
})
</script>
<body>

	<div id="stage">

	<div id="box"></div>

	</div>
<h2 id="status">
0, 0
</h2>
</body>
</html>